<template>
  <div class="header_contain">
    <img class="header_back" src="../assets/nav/返回.png" v-show="show_back" @click="btn_back"/>
    <div class="header_title">
      <span v-show="show_title">{{title}}</span>
    </div>
    <img class="header_search" src="../assets/nav/搜索.png" v-show="show_search" @click="btn_search"/>
    <img class="header_add" src="../assets/nav/添加.png" v-show="show_add" @click="btn_add"/>
  </div>
</template>

<script>
  export default {
    name:'Header',
    data(){
      return{

      }
    },
    props:{
      title:{
        type:String,
        default:'返回'
      },
      show_back:{
        type:Boolean,
        required:false,
        default:true
      },
      show_title:{
        type:Boolean,
        required:false,
        default:true
      },
      show_search:{
        type:Boolean,
        required:false,
        default:true
      },
      show_add:{
        type:Boolean,
        required:false,
        default:true
      }
    },
    methods:{
      btn_search(){
        this.$emit('searchClick')
      },
      btn_add(){
        this.$emit('addClick')
      },
      btn_back(){
        this.$emit('backClick')
      }
    }
  }
</script>
<style scoped>

  .header_contain{
    display: flex;
    height: 46px;
    width: 100%;
    line-height: 46px;
    color: white;
    background-color: #1e2b39;
    align-items: center;
  }
  .header_back{
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
  .header_title{
    flex: 1;
    margin-left: 8px;
  }

  .header_add{
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .header_search{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

</style>
